<template>
<view class="fenlei">
		
   <!-- 左侧 -->
   <view class='zuo' :style="'height:'+gaodu+'px'">
       <block v-for="fl in fenlei">
          <view class="type-nav " @click="Xuanze(fl.fenlei_id)"
				:class="fl.fenlei_id==curFenlei ? ' xuanzhong ' : '' "
		   >
			{{fl.fenlei_mc}}
          </view>
       </block>
	</view>

 
   <!-- 右侧 -->
   <scroll-view scroll-y class='you' :style="'height:'+gaodu+'px'" @scrolltolower="bottom" >
   
	 <view class='cp_zuixin'>
		<navigator url='' class='cp-xiangmu' v-for="cp in chanpin">
		 <image :src='cp.img' class='cp_tupian' mode='widthFix'></image>
		 <text class='cp-biaoti'>{{cp.title}}</text>
	   </navigator>
	 </view>
 
   </scroll-view>
 
		
</view>
</template>

<script>
	export default {
		data() {
			return {
				 gaodu:0,
				 fenlei:[],
				 chanpin:[],
				 page_kaishi:0,
				 page_zong:0,
				 curFenlei:0
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.gaodu = res.windowHeight;
				}
			})
			//获取分类  this.$WebURL.WebUrl.phpweb + "/h5/wx_api_CpFenlei.php"
			//http://qiyephp.yaoyiwangluo.com/h5/wx_api_CpFenlei.php
			uni.request({
				url:this.$WebURL.WebUrl.phpweb + "/h5/wx_api_CpFenlei.php",
				success: (res) => {
					this.fenlei = res.data
				}
			})
			
			//加载产品 this.$WebURL.WebUrl.phpweb + "/h5/wx_api_CpList_All.php"
			// http://qiyephp.yaoyiwangluo.com/h5/wx_api_CpList_All.php
			uni.request({
				url:this.$WebURL.WebUrl.phpweb + "/h5/wx_api_CpList_All.php",
				data:{
					page:this.page_kaishi
				},
				success: (res) => {
					this.chanpin = res.data;
					this.page_zong =res.data[0].yeshu;
				}
			})
			
		},
		methods: {
			Xuanze:function(flid){
				this.curFenlei = flid;
				this.chanpin =[];
				this.page_kaishi=0;
				//加载分类产品
				//this.$WebURL.WebUrl.phpweb +'/h5/wx_api_CpList_All.php'
				//参数 （1）page  当前页数    （2）cs_lxid  分类id	
				uni.request({
					url:this.$WebURL.WebUrl.phpweb +'/h5/wx_api_CpList_All.php',
					data:{
						page:this.page_kaishi,
						cs_lxid:flid
					},
					success: (res) => {
						this.chanpin = res.data;
						this.page_zong = res.data[0].yeshu 
					}
				})			
							
			},
			bottom:function(e){
				console.log("我到了底部了222")

				if(this.page_kaishi < this.page_zong){
					//加载数据
					this.fetchData(this.page_kaishi)
					this.page_kaishi = this.page_kaishi +1;
					console.log("当前的页数：" + this.page_kaishi)					
				}else{
					wx.showToast({
						title:"没有更多数据了"
					})
				}
			},
			//自定义加载方法
			//this.$WebURL.WebUrl.phpweb +'/h5/wx_api_CpList_All.php'
			//参数 （1）page  当前页数    （2）cs_lxid  分类id
			fetchData:function(yeshu){
				console.log("当前页数："+ yeshu)
				uni.showLoading({
					title:"加载中..."
				})
				uni.request({
					url:this.$WebURL.WebUrl.phpweb +'/h5/wx_api_CpList_All.php',
					data:{
						page:yeshu,
						cs_lxid:this.curFenlei
					},
					success: (res) => {
						console.log("当前数组的长度：" + res.data.length)
						for(var i=0;i<res.data.length;i++)
						{
							var obj = {};
							  obj.id = res.data[i].id
							  obj.title = res.data[i].title;
							  obj.shijian = res.data[i].shijian;
							  obj.shuoming = res.data[i].shuoming;
							  obj.img = res.data[i].img;	
						    var neirong = this.chanpin;
							neirong.push(obj);
							this.chanpin = neirong;							  
						}
						uni.hideLoading()
					}
				})
			}
			
		},
		onReachBottom:function(){
			console.log("我到了底部了")
		}
	}
</script>

<style>
 /*左右框架的样式*/
 .fenlei{
   height: 100%;
   box-sizing: border-box;
   background-color: #f4f4f4;
   display: flex;
   width: 100%;
 }
 /*框架左边样式*/
 .zuo{
   width: 25%;
   border-right: 1px solid #ddd;
   font-size: 14px; 
   height: 100%;
   display: flex;
   flex-direction: column;
 }
  /*框架右边样式*/
 .you{
   width: 75%;
   background-color: white;
 }

 /*左侧菜单的样式*/
.type-nav{
	padding: 10px 5px;
	position: relative;
	text-align: center;
	border-bottom: 1px solid #ddd;
	z-index: 10;
  padding: 5px;
}
 /*左侧菜单-选中的样式*/
.xuanzhong{
  color: #333; background-color: white;
  padding: 5px;
}

/*最新产品（1行2列流式布局）*/
.cp_zuixin {
  display: flex;
  flex-wrap: wrap;
}
.cp-xiangmu {
  width: 50%;
  display: flex;
  padding: 3px;
  box-sizing: border-box;
  flex-direction: column;
}
.cp_tupian {
  width: 100%;
}
.cp-biaoti {
  font-size: 14px;
  color: gray;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
